<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宿舍生活</title>
    <style>
        /* 全局样式 */
        body {
            font-family: '微软雅黑', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f0f4f8; /* 浅蓝色背景 */
            color: #2c3e50; /* 深蓝色文字 */
            line-height: 1.6;
        }

        /* 导航栏样式 */
        header {
            background-color: #f8f9fa; /* 浅灰色背景 */
            padding: 15px 0;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
        }

        nav {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
        }

        nav ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        nav ul li {
            margin-left: 20px;
        }

        nav ul li a {
            color: #000; /* 默认黑色字体 */
            text-decoration: none;
            font-size: 1.1em;
            padding: 8px 12px; /* 增加内边距 */
            border-radius: 5px; /* 圆角 */
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        nav ul li a:hover {
            background-color: rgba(52, 152, 219, 0.1); /* 悬停时浅蓝色背景 */
            color: #3498db; /* 悬停时蓝色字体 */
        }

        /* Logo样式 */
        .logo {
            color: #3498db; /* 蓝色字体 */
            font-size: 1.5em;
            font-weight: bold; /* 加粗 */
        }

        /* 容器样式 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        /* 标题样式 */
        h2 {
            color: #3498db; /* 蓝色标题 */
            font-size: 2.2em;
            margin-bottom: 25px;
            font-weight: 600;
            text-transform: uppercase; /* 标题大写 */
            letter-spacing: 1px; /* 字母间距 */
            text-align: center; /* 居中标题 */
        }

        h3 {
            color: #2c3e50; /* 深蓝色副标题 */
            font-size: 1.6em;
            margin-bottom: 15px;
            font-weight: 500;
        }

        p {
            font-size: 1.1em;
            margin-bottom: 10px;
            color: #34495e; /* 深灰色文字 */
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        ul li {
            background-color: #ffffff; /* 白色背景 */
            margin-bottom: 15px;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        ul li:hover {
            transform: translateY(-2px); /* 悬停效果 */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        /* 宿舍公约 */
        .dorm-rules ul li {
            font-size: 1.1em;
            padding-left: 20px;
            position: relative;
        }

        .dorm-rules ul li::before {
            content: "✔️";
            position: absolute;
            left: 0;
            color: #3498db; /* 蓝色图标 */
        }

        /* 宿舍活动网格布局 */
        .activity-grid,
        .story-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 响应式网格布局 */
            gap: 20px; /* 网格间距 */
        }

        /* 活动卡片样式 */
        .activity,
        .story {
            background-color: #ffffff; /* 白色背景 */
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .activity:hover,
        .story:hover {
            transform: translateY(-2px); /* 悬停效果 */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .activity h3,
        .story h3 {
            color: #3498db; /* 蓝色标题 */
            margin-bottom: 15px;
            font-size: 1.4em; /* 增大标题字体 */
        }

        .activity p,
        .story p {
            margin: 8px 0; /* 调整段落间距 */
            color: #34495e; /* 深灰色文字 */
            font-size: 1em; /* 统一字体大小 */
        }

        .activity strong,
        .story strong {
            color: #2c3e50; /* 深蓝色强调文字 */
            font-weight: 600; /* 加粗强调文字 */
        }

        /* 按钮样式（可选） */
        .button {
            background-color: #3498db; /* 蓝色按钮 */
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        .button:hover {
            background-color: #2980b9; /* 深蓝色悬停 */
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <header>
        <nav>
            <div class="logo">宿舍生活</div>
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="index2.html">宿舍成员</a></li>
                <li><a href="cht.html">宿舍生活</a></li>
                <li><a href="lcz.html">宿舍故事</a></li>
                <li><a href="cfx.HTML">关于我们</a></li>
            </ul>
        </nav>
    </header>

    <div class="container">
        <!-- 宿舍生活部分 -->
        <section id="dorm-life">
            <!-- 宿舍公约 -->
            <div class="dorm-rules">
                <h2>宿舍公约</h2>
                <ul>
                    <li>📅 作息时间：晚上11点后保持安静，不影响他人休息。</li>
                    <li>🧹 卫生值日：每天轮流打扫卫生，保持宿舍整洁。</li>
                    <li>🔌 用电安全：离开宿舍时关闭所有电器，节约用电。</li>
                    <li>🤝 互相尊重：尊重每个人的生活习惯，和谐相处。</li>
                </ul>
            </div>

            <!-- 宿舍活动 -->
            <div class="dorm-activities">
                <h2>宿舍活动</h2>
                <div class="activity-grid">
                    <div class="activity">
                        <h3>🍲 宿舍聚餐</h3>
                        <p><strong>时间：</strong>2023年10月01日</p>
                        <p><strong>地点：</strong>学校附近火锅店</p>
                        <p><strong>描述：</strong>我们一起吃了火锅，聊了很多有趣的话题，大家都玩得很开心！</p>
                    </div>
                    <div class="activity">
                        <h3>🏞️ 周末郊游</h3>
                        <p><strong>时间：</strong>2023年09月20日</p>
                        <p><strong>地点：</strong>郊区公园</p>
                        <p><strong>描述：</strong>我们一起去了公园野餐，拍了很多美照，还玩了桌游！</p>
                    </div>
                    <div class="activity">
                        <h3>🎉 生日派对</h3>
                        <p><strong>时间：</strong>2023年10月15日</p>
                        <p><strong>地点：</strong>宿舍</p>
                        <p><strong>描述：</strong>我们为舍友小方举办了一个惊喜生日派对，蛋糕和礼物都准备好了！</p>
                    </div>
                    <div class="activity">
                        <h3>🏀 篮球比赛</h3>
                        <p><strong>时间：</strong>2023年09月25日</p>
                        <p><strong>地点：</strong>学校操场</p>
                        <p><strong>描述：</strong>我们宿舍和其他宿舍进行了一场友谊赛，虽然输了，但大家玩得很开心！</p>
                    </div>
                </div>
            </div>

            <!-- 宿舍趣事 -->
            <div class="dorm-funny-stories">
                <h2>宿舍趣事</h2>
                <div class="story-grid">
                    <div class="story">
                        <h3>😂 谁偷吃了我的零食？</h3>
                        <p>某天晚上，小俊发现自己的零食不见了，结果发现是舍友小政偷偷吃掉了，还留了一张纸条：“太好吃了，下次我请你！”</p>
                    </div>
                    <div class="story">
                        <h3>🎮 游戏之夜</h3>
                        <p>我们宿舍经常一起打游戏，有一次玩到凌晨，结果第二天大家都睡过头了，差点错过早课！</p>
                    </div>
                    <div class="story">
                        <h3>📚 考试前的疯狂</h3>
                        <p>考试前一天晚上，我们宿舍集体熬夜复习，结果第二天大家都困得不行，差点在考场睡着！</p>
                    </div>
                    <div class="story">
                        <h3>🍕 披萨争夺战</h3>
                        <p>有一次我们点了披萨，结果因为谁吃最后一块差点打起来，最后决定用猜拳决定！</p>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 动态加载宿舍活动
        const activities = [
            {
                title: "🎉 生日派对",
                date: "2023年10月15日",
                location: "宿舍",
                description: "我们为舍友小方举办了一个惊喜生日派对，蛋糕和礼物都准备好了！"
            },
            {
                title: "🏀 篮球比赛",
                date: "2023年9月25日",
                location: "学校操场",
                description: "我们宿舍和其他宿舍进行了一场友谊赛，虽然输了，但大家玩得很开心！"
            }
        ];

        const stories = [
            {
                title: "📚 考试前的疯狂",
                description: "考试前一天晚上，我们宿舍集体熬夜复习，结果第二天大家都困得不行，差点在考场睡着！"
            },
            {
                title: "🍕 披萨争夺战",
                description: "有一次我们点了披萨，结果因为谁吃最后一块差点打起来，最后决定用猜拳决定！"
            }
        ];

        function loadActivities() {
            const activityContainer = document.querySelector('.activity-grid');
            activities.forEach(activity => {
                const activityHTML = `
                    <div class="activity">
                        <h3>${activity.title}</h3>
                        <p><strong>时间：</strong>${activity.date}</p>
                        <p><strong>地点：</strong>${activity.location}</p>
                        <p><strong>描述：</strong>${activity.description}</p>
                    </div>
                `;
                activityContainer.insertAdjacentHTML('beforeend', activityHTML);
            });
        }

        // 动态加载宿舍趣事
        function loadStories() {
            const storyContainer = document.querySelector('.story-grid');
            stories.forEach(story => {
                const storyHTML = `
                    <div class="story">
                        <h3>${story.title}</h3>
                        <p>${story.description}</p>
                    </div>
                `;
                storyContainer.insertAdjacentHTML('beforeend', storyHTML);
            });
        }

        // 初始化加载
        loadActivities();
        loadStories();
    </script>
</body>
</html>